<template>
	<!-- 文本的展开与收起 -->
<span>
    <span v-if="content.length<maxLen">
        <span class="tj">{{content}}</span>
    </span>
    <span v-else>
        <span class="tj">{{showBtn?sliceStr:content}}
            <span class="btnWord" @click="showBtn=!showBtn">{{showBtn?tip:"收起"}}</span>
        </span>
    </span>
</span>
</template>

<script>
export default {
    name: "unfold",
    data() {
        return {
            showBtn: true,
        }
    },
    props: {
        tip:{
            type:String,
            default:'全文'
        },
        // 数据
        content: {
            type: String,
            default: ''
        },
        // 最大长度
        maxLen: {
            type: Number,
            default: 200
        },
    },
    computed: {
        sliceStr() {
            if (this.content != null) {
				console.log(this.content)
                return this.content.substring(0, this.maxLen) + "...";
            }
            return '';
        }
    },
}
</script>

<style lang="scss" scoped>
.tj {
    text-align: justify;
    line-height: 1.8em;
    display: inline-block;
}

.btnWord {
    color: #ff8200;
    cursor: pointer;
    word-break: keep-all;
}
</style>

